<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-19 14:20:31
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-07-28 11:28:15
 * @FilePath: \hd_ims_web\src\views\board\boardSelect\board_mould_status copy.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="date_range"
              type="datetimerange"
              placeholder="查询日期"
              style="width: 320px"
              format="yyyy-MM-dd HH:mm"
              autocomplete="off"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="模具编号：">
            <el-autocomplete
              class="inline-input"
              v-model="queryParams.input_modocode"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              value-key="mjmMjbh"
              :clearable="true"
              style="width: 400px"
            >
              <template #default="{ item }">
                <div class="name">
                  {{ item.mjmMjbh }}
                  <br />
                  <span class="addr">{{ item.mjmMjmc }}</span>
                </div>
              </template>
            </el-autocomplete>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click.stop.native="get_info"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      :data="sys_m_data"
      border
      stripe
      id="exportGdMx"
      @scrollBottom="scrollPaging"
      height="calc(100% - 150px)"
      v-loading="loading"
      element-loading-text="查询的数据量较大，请稍等..."
    >
      <el-table-column label="#" type="index" width="55" align="center" />
      <el-table-column
        label="机台"
        align="center"
        width="135"
        prop="jitai_code"
      />
      <el-table-column
        label="模具编号"
        align="center"
        min-width="200"
        prop="modo_code"
      />
      <el-table-column
        label="开始时间"
        align="center"
        width="135"
        prop="time_start"
      />
      <el-table-column
        label="结束时间"
        align="center"
        prop="time_end"
        width="135"
      />
      <el-table-column label="周期" align="center" prop="zhouqi" width="80" />
      <el-table-column
        label="异常率"
        align="center"
        prop="yichanglv"
        width="135"
      />
      <el-table-column label="操作" align="center" width="135">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="
              () => {
                openDiag = true;
                curIndex = scope.$index;
                init_echartsInPopup();
              }
            "
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- MODAL3 补打标签 聚类 popup -->
    <el-dialog
      :title="win_title"
      v-model="openDiag"
      :close-on-click-modal="false"
      width="1200px"
      append-to-body
    >
      <el-row type="flex" :gutter="4">
        <el-col :span="8">
          <v-chart
            ref="l1"
            :options="chartOpt_modal_1"
            class="echarts1111"
            :autoresize="true"
            style="width: 100%"
          ></v-chart>
        </el-col>
        <el-col :span="8">
          <v-chart
            ref="p1"
            :options="chartOpt_modal_2"
            class="echarts1111"
            :autoresize="true"
            style="width: 100%"
          ></v-chart>
        </el-col>
        <el-col :span="8">
          <v-chart
            ref="s1"
            :options="chartOpt_modal_3"
            class="echarts1111"
            :autoresize="true"
            style="width: 100%"
          ></v-chart>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button
          :disabled="curIndex < 1"
          @click="
            () => {
              curIndex--;
              init_echartsInPopup();
            }
          "
        >
          上一个
        </el-button>
        <el-button
          :disabled="curIndex + 1 > sys_m_data.length"
          @click="
            () => {
              curIndex++;
              init_echartsInPopup();
            }
          "
        >
          下一个
        </el-button>
        <el-button
          type="primary"
          @click="
            () => {
              openDiag = false;
            }
          "
        >
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMjmMstr } from "@/api/project/mjmMstr";
import pythonService from "@/api/python/python";
import { exportTable } from "@/utils/ruoyi";
const scrollPaging = (() => {
  let total = 0;
  let data = [];
  let pageSize = 30;
  let pageNum = 1;
  let loading = false;

  return function (queryParams, req) {
    pageSize = queryParams.pageSize || pageSize;
    if (queryParams.pageNo <= 1) {
      data = [];
      pageNum = 1;
    }
    queryParams.pageNo = pageNum;
    if (
      !total ||
      queryParams.pageNo <= Math.ceil(total / queryParams.pageSize)
    ) {
      if (!loading) {
        loading = true;
        return req(queryParams).then((response) => {
          loading = false;
          data = data.concat(response.data);
          total = response.size;
          response.data_paging = data;
          pageNum++;
          queryParams.pageNo++;
          return response;
        });
      }
    }
    return Promise.resolve({ data_paging: data });
  };
})();
function getChartInitOpt(titleText, blnSX) {
  /*
   * 用于生成 echart 折线图的配置
   */
  let option = {
    backgroundColor: "rgba(243, 246, 252,0.7)",
    title: {
      text: titleText,
      x: "5px",
      textStyle: {
        color: "#555",
        fontSize: "20",
        rich: {
          b: {
            color: "#d16c4d",
            fontSize: "16",
          },
        },
      },
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      //鼠标hover
      trigger: "axis",
      // "axisPointer": {
      //     "type": "shadow",
      //     textStyle: {
      //         color: "#555"
      //     }
      // },
    },
    legend: {
      show: true,
      x: "right",
      itemWidth: 40,
      itemHight: 30,
      textStyle: {
        fontSize: 16,
      },
    },
    grid: {
      borderWidth: 0,
      top: 50,
      left: 50,
      bottom: 25,
      textStyle: {
        color: "#555",
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "value",
        name: "时间",
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "#555",
          },
        },
        splitArea: { show: false },
        axisLabel: {
          // show: false,
          // interval: 'auto', // 间隔应该设置多少？ @todo
          // 不太清楚这里的数据的频率时是多少？ 改一下下面的 80 那里来控制
          // const showLabelInterval = 80
          interval: (index, value) => index % 80 === 0,
          // rotate: -60,
        },
        nameTextStyle: {
          color: "#555",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#555",
          },
        },
        axisTick: { show: false },
        axisLabel: {
          interval: 0,
        },
        splitArea: { show: false },
        style: {
          color: "#555",
        },
        data: [],
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 50,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 80,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#555",
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: "模型",
        type: "line",
        // "stack": "总量",
        animation: false,
        showSymbol: false,
        label: {
          show: false,
        },
        itemStyle: { color: "rgba(0,191,183,1)" },
        data: [],
      },
      {
        name: "实际",
        type: "line",
        // "stack": "总量",
        animation: false,
        showSymbol: false,
        label: { show: false },
        itemStyle: { color: "#ed4014" },
        lineStyle: { width: 1 },
        data: [],
      },
    ],
  };
  if (blnSX) {
    option.series = option.series.concat([
      {
        name: "模型",
        type: "line",
        animation: false,
        showSymbol: false,
        label: { show: false },
        itemStyle: { color: "#004df3" },
        lineStyle: { width: 1, type: "dotted" },
        data: [],
      },
      {
        name: "模型",
        type: "line",
        animation: false,
        showSymbol: false,
        label: { show: false },
        itemStyle: { color: "#004df3" },
        lineStyle: { width: 1, type: "dotted" },
        data: [],
      },
    ]);
  }
  return option;
}
export default {
  name: "BoardMouldHistory",
  data() {
    return {
      now_data: {},
      excel_disable: true,
      loading: false,
      total: 21,
      queryParams: {
        pageNo: 1,
        pageSize: 50,
        input_modocode: "",
      },
      win_title: "",
      sys_m_data: [],
      curIndex: 0,
      date_range: [this.$moment().add(-1, "days"), this.$moment()],
      moj_code: "",
      //用于补打标签 的 popup modal3
      openDiag: false,
      chartOpt_modal_1: getChartInitOpt("螺杆位置"),
      chartOpt_modal_2: getChartInitOpt("实际压力", 1),
      chartOpt_modal_3: getChartInitOpt("注射速度", 1),
    };
  },
  methods: {
    querySearch(queryString, cb) {
      listMjmMstr({ pageNum: 1, pageSize: 10, mjmMjbh: queryString }).then(
        (a) => {
          cb(a.rows);
        }
      );
    },
    excel_out() {
      //  exportTable('#tabMoudleWork div', '机台')
    },
    //补打标签中图像显示 (标题为"聚类-n"的弹出窗口)
    init_echartsInPopup() {
      let dataIn = this.sys_m_data[this.curIndex];
      this.win_title = `样本数据    （样品ID: ${dataIn.id} ; 异常率: ${dataIn.yichanglv}）`;
      const showLabelInterval = 80; // 这个数值应该等于数据的采样频率
      dataIn.actual_location = dataIn.actual_location || [];
      dataIn.actual_pressure = dataIn.actual_pressure || [];
      dataIn.actual_speed.data = dataIn.actual_speed || [];
      this.chartOpt_modal_1.series[0].data = dataIn.portrait_location.map(
        (v, i) => [i / showLabelInterval, v]
      );
      this.chartOpt_modal_2.series[0].data = dataIn.portrait_pressure.map(
        (v, i) => [i / showLabelInterval, v]
      );
      this.chartOpt_modal_3.series[0].data = dataIn.portrait_speed.map(
        (v, i) => [i / showLabelInterval, v]
      );

      this.chartOpt_modal_1.series[1].data = dataIn.actual_location.map(
        (v, i) => [i / showLabelInterval, v]
      );
      this.chartOpt_modal_2.series[1].data = dataIn.actual_pressure.map(
        (v, i) => [i / showLabelInterval, v]
      );
      this.chartOpt_modal_3.series[1].data = dataIn.actual_speed.map((v, i) => [
        i / showLabelInterval,
        v,
      ]);

      if (
        dataIn.shangjie_pressure &&
        dataIn.shangjie_pressure != "" &&
        this.chartOpt_modal_2.series.length > 3
      ) {
        this.chartOpt_modal_2.series[2].data = dataIn.shangjie_pressure.map(
          (v, i) => [i / showLabelInterval, v]
        );
        this.chartOpt_modal_2.series[3].data = dataIn.xiajie_pressure.map(
          (v, i) => [i / showLabelInterval, v]
        );
      }
    },
    // 通用滚动分页
    scrollPaging() {
      this.queryParams.input_time_start = this.$moment(
        this.date_range[0]
      ).format("YYYY-MM-DD HH:mm:ss");
      this.queryParams.input_time_end = this.$moment(this.date_range[1]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      scrollPaging(this.queryParams, pythonService.getProductHistrory).then(
        (res) => {
          this.sys_m_data = res.data_paging;
        }
      );
    },
    get_info() {
      this.loading = true;
      this.queryParams.pageNo = 1;
      this.queryParams.input_time_start = this.$moment(
        this.date_range[0]
      ).format("YYYY-MM-DD HH:mm:ss");
      this.queryParams.input_time_end = this.$moment(this.date_range[1]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      pythonService
        .getProductHistrory(this.queryParams)
        .then((response) => {
          this.sys_m_data = response.data;
          this.total = response.size;
          this.loading = false;
        })
        .catch((e) => {
          this.sys_m_data = [];
          this.queryParams.pageNo = 1;
          this.total = 0;
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
li {
  line-height: normal;
  padding: 7px;
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 20px;
  }
  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .highlighted .addr {
    color: #ddd;
  }
}
</style>
